<template>
	<view class="content">
		<!-- 电量显示栏-->
		<view class="top_nav">
			<!-- <image src="../../static/buy/1.png"></image> -->
			<view class="kong"></view>
			<view class="tab_item">
				<view class="return" @click="pageReturn">
					<image src="https://jialianxin-1301053941.cos.ap-chengdu.myqcloud.com/static/course/jiantou.png"></image>
				</view>
				<view class="title">我的设备</view>
				<view class="return"></view>
			</view>
		</view>
		<view class="input_mox">
			<view class="input_box">
				<view class="input_wrap">
					<view class="search_icon">
						<image src="https://jialianxin-1301053941.cos.ap-chengdu.myqcloud.com/static/course/search.png" mode="aspectFit"></image>
					</view>
					<view class="search_input">
						<input type="text" placeholder="请输入手机号或有效设备序列号" @input="input_lis" placeholder-style="font-size: 28upx;" value="" />
					</view>
				</view>
			</view>
		</view>
		
		
		<view class="shebei_status">
			<view class="status_item" v-for="(item,index) in shebei_nav" :key="index" @click="changeStatus(index)">
				<view :class="currentIndex == index?'status_active':'status_it'">{{item.status}}</view>
			</view> 
		</view> 
		
		<!-- 搜索条件 -->
		<view class="search_list">
			<view class="search_left" >
				<view class="search_item " v-for="(item,index) in search" :key="index" @click="check(item)">{{item.name}}</view>
			</view>
			<view class="p_2">
				<w-picker
					mode="range"
					startYear="2017"
					endYear="2030"
					:value="rangeVal"
					:current="true"
					@confirm="onConfirm($event, 'range')"
					@cancel="onCancel"
					ref="range"
				></w-picker>
				<text @tap="handleTap('range')">{{ result }}</text>
				<view class="down_icon">
					<image src="https://jialianxin-1301053941.cos.ap-chengdu.myqcloud.com/static/down.png" mode="aspectFit"></image>
				</view>
			</view>

		</view>
		
		<!-- 设备总数 -->
		<view class="equipment_total">共<text>{{sum}}</text>台设备</view>
		
		<scroll-view class="order_detail">
			<swiper class="swiper_w" :duration="500" :current="currentIndex" :data-index="currentIndex" @change="toggle" circular>
				<swiper-item class="swiper-item" v-for="(item,index) in shebei_nav" :key="index">
					<scroll-view scroll-y="true" class="scroll_list" @scrolltolower="loadData(1)">
						<view class="order_list_item" v-for="(item1,index1) in item.shebei_list" :key="index1">
							<view class="order_item_top">
								<view class="order_item_top_box">序列号:<text>{{item1.sn}}</text></view>
							</view>
							<view class="order_item_mid">
								<view class="order_name">姓名:<text>{{item1.nickname}}</text></view>
								<view class="order_phone">电话:<text>{{item1.mobile}}</text></view>
								<view class="order_money" v-if="item1.depositstatus == 1">奖励金:<text>已返还</text></view>
								<view class="order_money" v-else>奖励金:<text>未返还</text></view>
							</view>
							<view class="order_bottom">
								<view class="order_bottom">
									<view class="shouyi_total" v-if="item1.total_trans == null">累计交易:<text>￥0.00</text></view>
									<view class="shouyi_total" v-else>累计交易:<text>￥{{item1.total_trans}}</text></view>
									<view class="shouyi_time">最后交易时间:<text>{{item1.lasttranstime.split(' ')[0]}}</text></view>
								</view>
							</view>
						</view>
						<uni-load-more :status="shebei_nav[currentIndex].loadingType"></uni-load-more>
						<view class="blank"></view>
					</scroll-view>
				</swiper-item>
			</swiper>
		</scroll-view>
		<!-- <view class="shebei_wrap">
			<view class="shebei_item" v-for="(item,index) in shebei_list" :key="index">
				<view class="shebei_left">
					<image :src="item.shebei_img"></image>
				</view>
				<view class="shebei_right">
					<view class="shebei_name">设备名称:<text>{{item.category.name}}</text></view>
					<view class="shebei_no">设备编号:<text>{{item.sn}}</text></view>
				</view>
			</view>
			<uni-load-more :status="loadingType"></uni-load-more>
			<view class="blank"></view>
		</view> -->
	</view>
</template>

<script>
	import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue';
	import wPicker from "@/components/w-picker/w-picker.vue"	
	export default {
		data() {
			const currentDate = this.getDate({
				format: true
			})
			return {
				date: '自定义时间',
				rangeVal:['2018-12-12','2020-04-02'],
				result:'自定义时间',
				category_id:null,
				currentIndex:0,
				sum:0,
				shebei_nav:[
					{
						state:"",
						status:'全部设备',
						loaded: false,
						loadingType: 'more',
						pageNum: 1,
						limit: 10,
						shebei_list:[
							// {
							// 	order_no:'84981414019319',
							// 	order_name:'张三三',
							// 	order_phone:'13872820182',
							// 	order_money:'192.00',
							// 	order_time:'2020-07-10 11:24:38',
							// 	all_price:'189.00',
							// },{
							// 	order_no:'84981414019319',
							// 	order_name:'张三三',
							// 	order_phone:'13872820182',
							// 	order_money:'192.00',
							// 	order_time:'2020-07-10 11:24:38',
							// 	all_price:'189.00',
							// },{
							// 	order_no:'84981414019319',
							// 	order_name:'张三三',
							// 	order_phone:'13872820182',
							// 	order_money:'192.00',
							// 	order_time:'2020-07-10 11:24:38',
							// 	all_price:'189.00',
							// }
						],
					},
					{
						state:1,
						status:'已激活',
						loaded: false,
						loadingType: 'more',
						pageNum: 1,
						limit: 10,
						shebei_list:[
							// {
							// 	shebei_img:'../../static/myjgq/shebei.png',
							// 	shebei_name:'M2',
							// 	shebei_no:'FD2523738392020'
							// },{
							// 	shebei_img:'../../static/myjgq/shebei.png',
							// 	shebei_name:'M2',
							// 	shebei_no:'FD2523738392020'
							// },{
							// 	shebei_img:'../../static/myjgq/shebei.png',
							// 	shebei_name:'M2',
							// 	shebei_no:'FD2523738392020'
							// },{
							// 	shebei_img:'../../static/myjgq/shebei.png',
							// 	shebei_name:'M2',
							// 	shebei_no:'FD2523738392020'
							// }
						],
					},
					{
						state:0,
						status:'未激活',
						loaded: false,
						loadingType: 'more',
						pageNum: 1,
						limit: 10,
						shebei_list:[
							// {
							// 	shebei_img:'../../static/myjgq/shebei.png',
							// 	shebei_name:'M2',
							// 	shebei_no:'FD2523738392020'
							// },{
							// 	shebei_img:'../../static/myjgq/shebei.png',
							// 	shebei_name:'M2',
							// 	shebei_no:'FD2523738392020'
							// },{
							// 	shebei_img:'../../static/myjgq/shebei.png',
							// 	shebei_name:'M2',
							// 	shebei_no:'FD2523738392020'
							// },{
							// 	shebei_img:'../../static/myjgq/shebei.png',
							// 	shebei_name:'M2',
							// 	shebei_no:'FD2523738392020'
							// }
						],
					}
				],
				search:[
					// {
					// 	name:'全部'
					// },{
					// 	name:'拉卡拉'
					// },{
					// 	name:'快钱'
					// },
					// {
					// 	name:'快钱'
					// },
				],
				num:null,
				token:''
			}
		},
		computed: {
			startDate() {
				return this.getDate('start');
			},
			endDate() {
				return this.getDate('end');
			}
		},
		// onReachBottom() {
		// 	this.loadData(1);
		// },
		onShow() {
		},
		onLoad(option) {
			this.token=option.token
			this.get_category()
			
			//获取我的设备信息
			this.loadData(0);
		},
		methods: {
			onConfirm(res,type){
				//开始
				// var date = res.value.split('至')
				// var startYear = date[0].split('-')[0]
				// var startDay = date[0].split('-')[1]
				// var startDate = startYear+'-'+startDay
				// //结束
				// var endYear = date[1].split('-')[0]
				// var endDay = date[1].split('-')[1]
				// var endDate = endYear+'-'+endDay
				// this.result=startDate+'至'+endDate
				// console.log(this.result)
				this.result=res.value
				this.rangeVal = res.value.split('至')
				let navItem = this.shebei_nav[this.currentIndex];
				navItem.pageNum = 1
				navItem.shebei_list=[]
				//根据时间			//获取我的设备信息
				this.loadData(6)
				// console.log(this.rangeVal)
			},
			onCancel(){
				
			},
			handleTap(picker) {
				this.$refs[picker].show();
			},
			//监听用户监听的值，查询对应的数据
			input_lis(e){
				//如果输入条件就执行条件查询，否则按条件为空执行
				if(e.detail.value.length==11 || e.detail.value.length==20)
				{
					//赋值
					this.num = e.detail.value
					let navItem = this.shebei_nav[this.currentIndex];
					navItem.pageNum = 1
					navItem.shebei_list=[]
					this.loadData(4)
				}else if(e.detail.value == ""){
					//赋值
					this.num = null
					let navItem = this.shebei_nav[this.currentIndex];
					navItem.pageNum = 1
					navItem.shebei_list=[]
					this.loadData(4)
				}
				
			},
			//类型tab
			check(item){
					//类型id
				this.category_id = item.id
				//定义下标
				let navItem = this.shebei_nav[this.currentIndex];
				navItem.pageNum = 1
				navItem.shebei_list=[]
				//调用加载事件
				this.loadData(3)
			},
			//类型列表
			get_category(){
				let params = {
					token:this.token
				};
				// GET/api/usercenter/device/category
				var url = '/api/usercenter/device/category';
				this.Unfold_data.upload_data(params, 'GET', url, res => {
					if (res.statusCode == 200 && res.data.code == 1) {
						
						this.search = res.data.data
						
					} else {
						this.Unfold_data.showWindow(res.data.msg);
					}
				});
				
			},
			bindDateChange(e) {
				this.date = e.target.value
			},
			getDate(type) {
				const date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				// let day = date.getDate();
	
				if (type === 'start') {
					year = year - 60;
				} else if (type === 'end') {
					year = year + 2;
				}
				month = month > 9 ? month : '0' + month;;
				// day = day > 9 ? day : '0' + day;
				return `${year}-${month}`;
			},
			//获取我的设备信息
			loadData(source){
				//这里是将我的设备挂载到tab列表下
				if (!this.currentIndex) {
				    this.currentIndex = 0;
				}
				//定义下标
				let index = this.currentIndex;
				//拿到数组对应下标的值
				let navItem = this.shebei_nav[index];
				//拿到数组对应下标的状态
				let state = navItem.state;
				//防止重复加载
				if (source == 1 && navItem.loadingType == 'noMore') {
					return;
				} 
				//滚动防止重复加载
				if (source == 2 && navItem.loaded==true) {
					return;
				}
				if (source == 0 && navItem.loaded==true) {
					return;
				}
				//进入方法先加载
				navItem.loadingType="loading"
				let params2 = {
						limit:navItem.limit,
						page:navItem.pageNum,
						keyword:this.num,
						category:this.category_id,
						status:navItem.state,
						token:this.token
					};
				
				
				if(this.result != "自定义时间"){
					params2 = {
						limit:navItem.limit,
						page:navItem.pageNum,
						keyword:this.num,
						startTime:new Date(this.rangeVal[0].replace(/-/g,'/')).getTime()/1000,
						endTime:new Date(this.rangeVal[1].replace(/-/g,'/')).getTime()/1000,
						token:this.token	
					};
				}
				
				
				
				var url2 = '/api/usercenter/device/deviceManage'
				this.Unfold_data.upload_data(params2, 'GET', url2, res => {
					if (res.statusCode == 200 && res.data.code == 1) {
						//获取我的总设备
						this.sum = res.data.data.total
						//默认上拉
						navItem.loadingType = 'more';
						if (!res.data.data.rows) {
							//没有数据
							navItem.loadingType = 'noMore';
						} else if (res.data.data.rows.length < navItem.limit) {
							navItem.loadingType = 'noMore';
							if (res.data.data.rows.length > 0) {
								navItem.shebei_list = navItem.shebei_list.concat(res.data.data.rows);
								navItem.loaded = true
							}
						} else if (res.data.data.rows.length == navItem.limit) {
							if (res.data.data.rows.length > 0) {
								navItem.shebei_list = navItem.shebei_list.concat(res.data.data.rows);
								navItem.loaded = true
							}
							//page_num数加一
							navItem.pageNum = navItem.pageNum + 1;
						}
						this.category_id = null
					} else if (res.statusCode == 401 && res.data.code == 401) {
						this.Unfold_data.showWindow(res.data.msg);
						setTimeout(function() {
							uni.reLaunch({
								url: '/pages/login/login'
							});
						}, 1000);
					} else {
						this.Unfold_data.showWindow(res.data.msg);
					}
				});
			},
			pageReturn(){
				uni.navigateBack({
					delta:1
				})
			},
			changeStatus(index){
				this.currentIndex = index;
				//定义下标
				let navItem = this.shebei_nav[index];
				navItem.pageNum = 1
				navItem.shebei_list=[]
			},
			// 切换触发的事件
			toggle(e) {
				let index = e.detail.current;
				this.currentIndex = index;
				//定义下标
				let navItem = this.shebei_nav[index];
				navItem.pageNum = 1
				navItem.shebei_list=[]
				this.loadData(5)
			},
		}
	}
</script>

<style lang="scss">
page{
	width: 100%;
	height: 100%;
	background-color: #f2f2f2;
}
.blank {
	height: 500upx;
}
.content{
	width: 100%;
	position: relative;
	.top_nav{
		width: 100%;
		height: 160upx;
		background-image: url('https://jialianxin-1301053941.cos.ap-chengdu.myqcloud.com/static/buy/1.png');
		background-size: cover;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 10;
		.kong{
			width: 100%;
			height: 60upx;
		}
		.tab_item{
			width: 90%;
			margin: 0 auto;
			height: 100upx;
			display: flex;
			align-items: center;
			justify-content: center;
			.return{
				flex: 1;
				width: 100%;
				image{
					width: 29upx;
					height: 29upx;
				}
			}
			.title{
				flex: 8;
				width: 100%;
				color: #ffffff;
				display: flex;
				align-items: center;
				justify-content: center;
				z-index: 10;
			}
		}
	}
	.input_mox{
		width: 100%;
		padding-top: 160upx;
		.input_box{
			width: 100%;
			height: 120upx;
			background: #FFFFFF;
			display: flex;
			align-items: center;
			justify-content: center;
			.input_wrap{
				width: 90%;
				margin: 0 auto;
				height: 60upx;
				border-radius: 30upx;
				background: #f7f8fa;
				display: flex;
				align-items: center;
				justify-content: center;
				.search_icon{
					padding-right: 10upx;
					image{
						width: 30upx;
						height: 30upx;
					}
				}
				.search_input{
					input{
						font-size: 42upx;
					}
				}
			}
		}
	}
	
	.shebei_status{
		width: 100%;
		height: 100upx;
		background-color: #FFFFFF;
		display: flex;
		align-items: center;
		.status_item{
			flex: 1;
			display: flex;
			align-items: center;
			justify-content: center;
			height: 100%;
			border-top: 4upx solid #f7f8fa;
			border-bottom: 4upx solid #f7f8fa;
			.status_active{
				height: 100upx;
				display: flex;
				align-items: center;
				justify-content: center;
				border-bottom: 8upx solid  #fc1501;
				color: #fc1501;
			}
			.status_it{
				height: 100upx;
				display: flex;
				align-items: center;
				justify-content: center;
			}
		}
	}
	.search_list{
		width: 100%;
		height: 80px;
		padding: 20upx;
		background-color: #FFFFFF;
		box-shadow: #cccccc 7px 4px 5px;
		
		.search_left{
			width: 100%;
			height: 1.5em;
			// margin-top: 20px;
			.search_item{
				display: flex;
				flex-direction: column;        
				justify-content: center;    
				align-items: center; 
				padding: 8upx 20upx;
				background-color: #F8F6FC;
				margin-right: 15upx;
				margin-bottom: 15upx;
				border-radius: 30upx;
				font-size: 26upx;
				&:hover{
					color: #fc1501;
					background: #ffe8e5;
				}
				display: inline-block; 
			}
		}
		.p_2{
			margin-top: 40upx;
			flex: 1;
			display: flex;
			justify-content: flex-end;
			font-size: 20upx;
			.down_icon{
				padding-top:5upx;
				padding-left: 10upx;
				image{
					width: 25upx;
					height: 25upx;
				}
			}
		}
		// .search_right{
		// 	flex: 1;
		// 	display: flex;
		// 	align-items: center;
		// 	justify-content: flex-end;
		// 	text{
		// 		font-size: 26upx;
		// 	}
		// 	.down_icon{
		// 		padding-top: 10upx;
		// 		padding-left: 15upx;
		// 		image{
		// 			width: 25upx;
		// 			height: 25upx;
		// 		}
		// 	}
		// }
	}
	.equipment_total{
		width: 100%;
		margin-top:20px;
		margin-left: 20px;
		color: #909399;
		text{
			color: #000000;
		}
	}
	.order_detail{
		width: 100%;
		height: 100%;
		position: fixed;
		.swiper_w{
			width: 100%;
			height: calc(100% - 80upx);
			.swiper-item{
				.scroll_list{
					width: 100%;
					height: 100%;
					.order_list_item{
						width:100%;
						margin-top: 30upx;
						background: #FFFFFF;
						font-size: 28upx;
						border-radius: 20px;
						
						.order_item_top{
							width: 100%;
							height: 80upx;
							.order_item_top_box{
								
								width: 90%;
								margin: 0 auto;
								margin-top: 20upx;
								height: 80upx;
								
								border-bottom: 2upx dashed #AAAAAA;
								display: flex;
								align-items: center;
								text{
									padding-left: 20upx;
								}
							}
						}
						.order_item_mid{
							width: 100%;
							padding: 20upx 30upx;
							.order_name{
								width: 100%;
								height: 50upx;
								display: flex;
								align-items: center;
								text{
									padding-left: 20upx;
									color: #7c7c7c;
								}
							}
							.order_phone{
								width: 100%;
								height: 50upx;
								display: flex;
								align-items: center;
								text{
									padding-left: 20upx;
									color: #7c7c7c;
								}
							}
							.order_money{
								width: 100%;
								height:50upx;
								display: flex;
								align-items: center;
								text{
									padding-left: 20upx;
									color: #7c7c7c;
								}
							}
						}
						
						.order_bottom{
							width: 100%;
							height: 80upx;
							padding-left: 15upx;
							padding-right: 15upx;
							background-color: #f8f6fc;
							display: flex;
							align-items: center;
							color: #efe2e2;
							font-size: 24upx;
							box-shadow: #e8e8e8 7px 4px 10px;
							.shouyi_total{
								flex: 1;
								color: #2e2e2e;
								text{
									font-size: 30upx;
									color: #DD524D;
									font-weight: bold;
									padding-left: 20upx;
								}
							}
							.shouyi_time{
								flex: 1;
								text-align: right;
								color: #2e2e2e;
							}
						}
					}
				}
			}
		}
	}
	// .shebei_wrap{
	// 	width: 100%;
	// 	margin-top: 185upx;
	// 	.shebei_item{
	// 		width: 90%;
	// 		margin: 0 auto;
	// 		display: flex;
	// 		align-items: center;
	// 		justify-content: center;
	// 		border-bottom: 2upx solid #cccccc;
	// 		padding: 20upx 0;
	// 		.shebei_left{
	// 			flex: 2;
	// 			image{
	// 				width: 93upx;
	// 				height: 147upx;
	// 			}
	// 		}
	// 		.shebei_right{
	// 			flex: 8;
	// 			.shebei_name{
	// 				padding: 10upx 0;
	// 				text{
	// 					padding-left: 10upx;
	// 				}
	// 			}
	// 			.shebei_no{
	// 				text{
	// 					padding-left: 10upx;
	// 				}
	// 			}
	// 		}
	// 	}
	// 	.shebei_item:last-child{
	// 		border-bottom: none;
	// 	}
	// }
}
</style>
